<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="publish-picture-widget" :style="getStyle('head')">
      <div class="box" :style="getStyle('box')">
        <span :style="getStyle('title')">{{ optionsInfo["contentTitle"]}}</span>
        <pre :style="getStyle('content')">{{ optionsInfo["content"] }}</pre>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { v4 as uuid } from "uuid";
import { pxToVw } from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";

export default {
  name: "publish-picture-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
  },

  data() {
    return {
      optionsInfo: Object(),
      carouselKey: uuid(),
      header: require("@a/images/design/header-03.jpg"),
    };
  },

  computed: {
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid();
      };
    },

    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Object();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "height", pxToVw(info.areaHeight));
            return Obj;
          case "title":
            Reflect.set(Obj, "fontSize", pxToVw(info.contentTitleFontSize));
            Reflect.set(Obj, "color", info.contentTitleFontColor);
            Reflect.set(Obj, "fontWeight", info.contentTitleFontWeight);
            Reflect.set(Obj, "text-align", "center");
            Reflect.set(Obj, "margin-bottom", info.marginBottom + "px");
            return Obj;
          case "content":
            Reflect.set(Obj, "fontSize", pxToVw(info.contentFontSize));
            Reflect.set(Obj, "color", info.contentFontColor);
            Reflect.set(Obj, "fontWeight", info.contentFontWeight);
            Reflect.set(Obj, "text-align", "center");
            return Obj;
          case 'box':
             Reflect.set(Obj, "top", info.postionTop + '%' );
            return Obj
        }
      };
    },

    // 获取图片资源
    getPictureSource() {
      return function (row) {
        return `${row}?t=${this.getOnlyId()}`;
      };
    },
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {},

  destroyed() {
    this.unregisterFromRefList();
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        let key = val.options.config;
        this.carouselKey = uuid();
        this.optionsInfo = val?.options[key] || Object();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.publish-picture-widget {
  background-color: transparent;
  color: #333;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  position: absolute;
  // top: 25%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
</style>